<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作品赏析</title>
		<link rel="stylesheet" href="../public/css/bootstrap.css">
		<link rel="stylesheet" href="../public/css/common.css">
		<link rel="stylesheet" href="../public/css/base.css">
		<link rel="stylesheet" href="../public/css/production.css">
	</head>
	<body>
		<div class="main">
	<!--logo-->
	        <div class="header-logo-search-box">
	            <div class="header-logo-box">
	                <img src="../public/images/logo_06.png" alt="">
	                <p style="font-size: 16px" >中国摄影家协会官方网站</p>
	            </div>
	            <div class="header-search-box">
	                <img src="../public/images/seach.png" alt="" class="searchIcon">
	                <input type="text" value="" placeholder="请输入搜索关键词" class="searchWord">
	                <input type="button" value="搜索" class="searchBtn">
	            </div>
	        </div>
	<!-- 平台-->
	        <div class="header-pt-box">
	            <div class="header-pt-title">网上摄影全平台</div>
	            <ul class="header-pt-list"></ul>
	        </div>
	<!-- 网站群-->
	        <div class="header-webs-box">
	            <div class="header-webs-title">网上摄影网站群</div>
	            <div class="header-webs-list-box">
	                <img src="../public/images/header-r.png" alt="" class="prevIcon">
	                <div class="header-webs-list">
	                    <ul style="left: 0px"></ul>
	                </div>
	                <img src="../public/images/header-l.png" alt="" class="nextIcon">
	            </div>
	
	        </div>
	<!-- 摄协-->
	        <div class="header-shexie-box">
	            <div class="header-shexie-title">中国摄协</div>
	            <ul class="header-shexie-list"></ul>
	        </div>
	    </div>
	    <div class="tabbat-box">
	        <div class="tabbar main"></div>
	    </div>
		<div class="lf-position">
			<div class="lf-fl color-27">
				<img src="../public/images/tips12_03.png" alt="">
				<div class="lf-sign">首页</div>
				>>
				<div>作品赏析</div>
			</div>
		</div>
		<!-- 内容区 -->
		<div class="lf-index-analyze">
			<div class="lf-flj">
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
				<div class="lf-tc">
					<img src="../public/images/11%20(2).png" alt="">
					<div>美丽的风景</div>
				</div>
			</div>
			<div class="lf-tc">
				<nav aria-label="Page navigation">
				  <ul class="pagination pagination-lg">
				    <li>
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				    <li><a href="#">1</a></li>
				    <li><a href="#">2</a></li>
				    <li><a href="#">3</a></li>
				    <li><a href="#">4</a></li>
				    <li><a href="#">5</a></li>
				    <li>
				      <a href="#" aria-label="Next">
				        <span aria-hidden="true">&raquo;</span>
				      </a>
				    </li>
				  </ul>
				</nav>
			</div>
		</div>
		
		
		
		
	<!--    友情链接-->
		<div class="friendlink-box">
			<div class="main" >
				<div class="fl-title">友情链接</div>
				<div class="fl-list-box"></div>
			</div>
		</div>
	<!--    网站地步-->
		<div class="footer-box">
			<div class="main footer">
				<div class="footer-logo-box">
					<img src="../public/images/logo1_42.png" alt="" class="footer-logo-img">
					<div class="footer-cell-me">
						<ul>
							<li>联系我们</li>
							<li>关于我们</li>
							<li style="border: none">举报入口</li>
						</ul>
						<p>京ICP备06003739-4 京公网安备11010102000847号未经同意，不得转载、使用和链接本站内容，违者必究</p>
					</div>
				</div>
				<div class="footer-ercode-box">
					<div class="footer-ercode-item">
						<img src="../public/images/code1_42.png" alt="">
						<div>扫码关注微信公众号</div>
					</div>
					<div class="footer-ercode-item">
						<img src="../public/images/code1_42.png" alt="">
						<div>扫码关注官方微博</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../public/js/jquery.min.js"></script>
		<script src="../public/js/bootstrap.js"></script>
		<script>
			$(function () {
			    let pingtais = [ "文艺宣传","品牌活动","佳作推介","会员服务", "人才培养", "维权服务", "志愿服务","大展征稿","影像国际"];
			    let webs =[ "京","津",'冀',"蒙","晋","辽","吉","黑","沪","苏","浙","皖","闽","赣","鲁","豫","鄂","湘","粤","桂","琼","川","渝","黔","滇","藏","陕","甘","宁","青","新","兵团","解放军","其他","其他","其他","其他","其他","其他","其他","其他","其他","其他","其他"]
			    let shexies = ["协会简介", "协会章程", "协会领导", "组织机构", "专业委员会", "职业道德建设委员会", "品牌活动", "摄协党建", "办事指南"]
			    let listHtml = "";
			    let websHtml = '';
			    let shexHtml = "";
			    pingtais.forEach( (item) => {
			        listHtml += "<li class='pt-item'>"+item+"</li>";
			    })
			    webs.forEach(item => {
			        websHtml += "<li class='webs-item'>"+item+"</li> ";
			    });
			    shexies.forEach( item => {
			        shexHtml += "<li class='shexie-item'>"+item+"</li>"
			    })
			    $(".header-pt-list").html(listHtml);
			    $(".header-webs-list ul").html(websHtml);
			    $(".header-shexie-list").html(shexHtml);
			    // 设置平台的第一个选项为红色
			    $(".pt-item").eq(0).css("color","#cc0000");
			    // 点击平台添加颜色
			    $(".header-pt-list li").click(function () {
			        $(this).css("color","#cc0000").siblings("li").css("color","");
			    })
			    //设置网上摄影网站群第一个选项为红色
			    $(".webs-item").eq(0).css("color","#cc0000");
			    //点击摄影网站上
			    $(".prevIcon").click(function () {
			        $(".header-webs-list ul").css("left", "0px");
			    });
			    //点击摄影网站下
			    $(".nextIcon").click(function () {
			        // 获取到容器的宽度
			        let cWidth = $(".header-webs-list").outerWidth();
			        //获取到要移动的元素宽度
			        let tWidth = $(".header-webs-list ul").outerWidth();
			        $(".header-webs-list ul").css("left", cWidth-tWidth+"px");
			    });
			    $(".header-webs-list ul li:last").css("border", "none");
			    // 选择摄影群选项
			    $(".header-webs-list-box li").click(function () {
			        $(this).css("color","#cc0000").siblings("li").css("color","");
			    })
			    $(".prevIcon").click(function () {
			        console.log("上一个");
			    });
			    $(".nextIcon").click(function () {
			        console.log("下一个");
			    });
			    //设置中国摄协第一个选项为红色
			    $(".shexie-item").eq(0).css("color","#cc0000");
			    // 选择中国摄协选项
			    $(".header-shexie-list li").click(function () {
			        $(this).css("color","#cc0000").siblings("li").css("color","");
			    })
			
			
			    // 菜单
			    let tabbars = [ "首页","新闻", "图片", "组织机构", "会员服务", "移动客户端"];
			    let tabItemDiv = "";
			    tabbars.forEach(item => {
			        tabItemDiv += "<div class='tabbar-item'>"+item+"</div>";
			    })
			    $(".tabbar").html(tabItemDiv)
			    $(".tabbar-item").eq(0).css({
			        "color": "#cc0000",
			        "backgroundColor": "#ffffff"
			    })
			    $(".tabbar .tabbar-item").click(function () {
			        $(this).css({
			            "color": "#cc0000",
			            "backgroundColor": "#ffffff"
			        }).siblings().css({
			            "color": "#ffffff",
			            "backgroundColor": ""
			        })
			    })
			
			    // 友情链接
			    $('.dropdown-toggle').dropdown()
			    let links =[
			        {
			            title: "",
			            childs:[ "各省团体单位","微信公众号","微信公众号","微信公众号",]
			        },{
			            title: "",
			            childs:[ "各行业团体会员单位","微信公众号","微信公众号","微信公众号",]
			        },{
			            title: "",
			            childs:[ "协会所属部门网站","微信公众号","微信公众号","微信公众号",]
			        },{
			            title: "",
			            childs:[ "全国文艺家协会网","微信公众号","微信公众号","微信公众号",]
			        },{
			            title: "",
			            childs:[ "合作媒体","微信公众号","微信公众号","微信公众号",]
			        }
			    ];
			    let flHtml = ''
			    for(let i = 0; i< links.length; i++){
			        let items = links[i].childs;
			        flHtml +="<select>";
			            for(let j = 0; j< items.length; j++){
			                flHtml += "<option>"+items[j]+"</option>"
			            }
			        flHtml+="</select>";
			    }
			    $(".fl-list-box").html(flHtml);
			})
		</script>
	</body>
</html>